<template>
  <div>
     <div class="header">
          <div class="seach">
            <input type="text" name="" id="">
            <button>搜索</button>
          </div>
      </div>
      <dl v-for="(v,i) in list" :key="i" @click="sub(v.id)">
        <dt>
          <img :src="v.img" alt="" />
        </dt>
        <dd>
          <p><b>{{v.title}}</b></p>
          <p>￥{{v.num}}</p>
        </dd>
      </dl>
  </div>
</template>

<script>
// import <组件名称> from '<组件路径>'
import {mapState,mapActions} from 'vuex'
  export default {
    name: 'Ind',
    //import引入的组件需要注入到对象中才能使用
    components: {},
    data() {
      //这里存放数据
      return {}
    },
    //监听属性 类似于data概念
    computed: {
      ...mapState(['list'])
    },
    //监控data中的数据变化
    watch: {},
    //方法集合
    methods: {
      ...mapActions(['SET_LIST']),
      sub(id){
        this.$store.commit('GET_DETAIL',id)
        this.$router.push({name:'Detail'})
      }
    },
    //生命周期 - 创建完成（可以访问当前this实例）
    created() {
      this.SET_LIST()
    },
    //生命周期 - 挂载完成（可以访问DOM元素）
    mounted() {},
    beforeCreate() {}, //生命周期 - 创建之前
    beforeMount() {}, //生命周期 - 挂载之前
    beforeUpdate() {}, //生命周期 - 更新之前
    updated() {}, //生命周期 - 更新之后
    beforeDestroy() {}, //生命周期 - 销毁之前
    destroyed() {}, //生命周期 - 销毁完成
    activated() {}, //如果页面有keep-alive缓存功能，这个函数会触发
  }
</script>
<style lang='scss' scoped>
  //@import url(); 引入公共css类
  .header{
    width: 100%;
    height: 45px;
    background: #f5f5f5;
    padding: 0 20px;
    display: flex;
    align-items: center;
  }
  .seach{
    width: 70%;
    height: 35px;
    border: solid 1px orangered;
    border-radius: 15px;
    display: flex;
    align-items: center;
    input{
      width: 80%;
      height: 100%;
      // background: salmon;
      outline: none;
      background: none;
      border: none;
    }
    button{
      width: 20%;
      height: 100%;
      outline: none;
      background: orangered;
      border: none;
      border-radius: 15px;
    }
  }
  dl{
    width: 100%;
    height: 120px;
    border-bottom: 1px solid #ccc;
    display: flex;
    align-items: center;
    padding: 0 20px;
    dt{
      margin-right: 10px;
    }
  }
</style>